<template>
  <div class="comp-padding">
    <a-tooltip placement="top">
      <template slot="title">
        <span>上边距</span>
      </template>
      <a-input-number
        :key="1"
        v-model="top"
        title="上边距"
        :size="size"
        class="padding"
        :min="0"
        :max="100"
        :step="1"
        :disabled="disabled"
        @blur="dataChange"
        @pressEnter="pressEnter"
      ></a-input-number>
    </a-tooltip>

    <a-tooltip placement="top">
      <template slot="title">
        <span>右边距</span>
      </template>
      <a-input-number
        :key="2"
        v-model="right"
        title="右边距"
        :size="size"
        class="padding"
        :min="0"
        :max="100"
        :step="1"
        :disabled="disabled"
        @blur="dataChange"
        @pressEnter="pressEnter"
      ></a-input-number>
    </a-tooltip>

    <a-tooltip placement="top">
      <template slot="title">
        <span>下边距</span>
      </template>
      <a-input-number
        :key="3"
        v-model="bottom"
        title="下边距"
        :size="size"
        class="padding"
        :min="0"
        :max="100"
        :step="1"
        :disabled="disabled"
        @blur="dataChange"
        @pressEnter="pressEnter"
      ></a-input-number>
    </a-tooltip>

    <a-tooltip placement="top">
      <template slot="title">
        <span>左边距</span>
      </template>
      <a-input-number
        :key="4"
        v-model="left"
        title="左边距"
        :size="size"
        class="padding"
        :min="0"
        :max="100"
        :step="1"
        :disabled="disabled"
        @blur="dataChange"
        @pressEnter="pressEnter"
      ></a-input-number>
    </a-tooltip>
  </div>
</template>
<script lang="ts">
import { isArray } from 'lodash'
import Vue from 'vue'

export default Vue.extend({
  name: 'PaddingSetter',
  props: {
    disabled: {
      type: Boolean,
      default() {
        return false
      },
    },
    size: {
      type: String,
      default() {
        return 'samll'
      },
    },
    value: {
      type: Array,
      default() {
        return [0, 0, 0, 0]
      },
    },
  },
  data() {
    return {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(newValue: any) {
        if (!(isArray(newValue) && newValue.length === 4)) {
          this.top = 0
          this.right = 0
          this.bottom = 0
          this.left = 0
          this.$emit('change', [0, 0, 0, 0])
          return [0, 0, 0, 0]
        }
        const newValueTrans = newValue as Array<number>
        if (newValueTrans.length === 4) {
          this.top = newValueTrans[0] as number
          this.right = newValueTrans[1] as number
          this.bottom = newValueTrans[2] as number
          this.left = newValueTrans[3] as number
        }

        return newValue
      },
    },
  },
  methods: {
    dataChange() {
      setTimeout(() => {
        const data = [this.top, this.right, this.bottom, this.left]
        this.$emit('input', data)
        this.$emit('change', data)
      }, 10)
    },
    pressEnter() {
      ;(window as any).document.body.click()
      setTimeout(() => {
        this.dataChange()
      }, 10)
    },
  },
})
</script>
<style lang="less" scoped>
.padding {
  display: inline-block;
  padding-right: 0;
  width: 23%;
}

.padding + .padding {
  margin-left: 2%;
}

/deep/ .ant-input-number-handler-wrap {
  display: none;
}
</style>
